import { departList } from "@/services/ant-design-pro/user"
import { ArrowRightOutlined, DownOutlined, FileTextOutlined, RightOutlined } from "@ant-design/icons"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable from "@ant-design/pro-table"
import { Badge, Button, Space } from "antd"
import { useState } from "react"

export default () => {

    let [expandall, setexpand] = useState(true);

    let [depart, setdepart] = useState([
        { id: 1, name: "测试顶级", children: [{ id: 2, name: "二级分类" }] }
    ]);

    //定义列的数据
    let columns: any = [
        {
            title: "部门名称",
            dataIndex: "name"
        },
        {
            title: "排序",
            dataIndex: "order",
            search: false,
        }, {
            title: "状态",
            dataIndex: "status",
            valueEnum: {
                0: {
                    text: "关闭"
                },
                1: {
                    text: "开启"
                }
            },
            render: (text: any, record: any) => [
                <Badge status={record.status ? "processing" : "error"} text={record.status ? "启用" : "关闭"}>
                </Badge>
            ]
        }, {
            title: "创建时间",
            dataIndex: "created_at",
            search: false,
        }, {
            title: "操作",
            search: false,
            width: "120px",
            render: () => [
                <Space size={1}>
                    <Button type="link">编辑</Button>
                    <Button type="link" danger>删除</Button>
                </Space>
            ]
        }
    ]
    return (
        <PageContainer>
            <ProTable
                rowKey="id"
                columns={columns}
                dataSource={depart}
                request={async (params: any) => {
                    let res: any = await departList({ ...params });
                    setdepart(res.data)
                    // return res;
                }}
                onLoad={() => setexpand(true)}
                indentSize={20}
                pagination={false}
                expandable={{
                    defaultExpandAllRows: expandall,
                    childrenColumnName: "children",
                    indentSize: 20,
                    expandIcon: ({ expanded, onExpand, record }) =>
                        record.children?.length > 0 ? !expanded ? (<RightOutlined style={{ marginRight: "10px", color: "#555" }} onClick={(e) => onExpand(record, e)} />) : (<DownOutlined style={{ marginRight: "10px", color: "#555" }} onClick={(e) => onExpand(record, e)} />) : <FileTextOutlined style={{ marginRight: "5px", color: "#555" }} />
                }}
            >
            </ProTable>
        </PageContainer >
    )
}